<!DOCTYPE html>
<html lang="@@{website_lang}" dir="@@{website_dirLTR}">
<head>
	<meta charset="@@{website_charset}" />
	<title>Dynamic Drop Down List - @@{website_title}</title>	
	@@include('./src/components/_global/include-header.html')
</head>  

     
  <body class="page">
  
  
    @@include('./src/components/_global/include-loader.html')
    @@include('./src/components/_global/include-toggle-trigger.html')
    
    
  
  
    <div class="uix-wrapper">
    
        <!-- Header Area
        ============================================= -->      
        <header class="uix-header__container">
            
             <div class="uix-header">
                 <div class="container">
                 
                        @@include('./src/components/_global/include-brand.html')
                        
                        @@include('./src/components/_global/include-menu.html')
                        
                        
                  </div>
                  <!-- .container end -->
                  
                  <div class="uix-clearfix"></div>
             </div>
        
        </header>
        <div class="uix-header__placeholder js-uix-header__placeholder-autoheight"></div>
      
		<main id="uix-maincontent">
			
			<!-- Content 
			====================================================== -->
			<section class="uix-spacing--s uix-spacing--no-bottom">
				<div class="container">
					<div class="row">
						<div class="col-12">
							<h3>Dynamic Drop Down List from JSON</h3>
							<p>Create a dynamic dropdown form that loads its data from a JSON file. Support infinite recursion.</p>
								<p class="uix-striking-msg uix-striking-msg--info"><strong>Callback:</strong> <span id="dynamic-callback">-</span></p>
							<hr>
							
							
						</div>
					</div>
					<!-- .row end -->

				</div>
				<!-- .container end -->

			</section>


			


		   <!-- Content 
			====================================================== -->
			<section class="uix-spacing--s">
				<div class="container">
						<div class="row">
							<div class="col-12">
                                
                                    <h4>Empty value</h4>

                                    <div data-ajax-dynamic-dd-datatype="category"
                                         data-ajax-dynamic-dd-json="assets/json/catgories.json"
                                         data-ajax-dynamic-dd-method="POST"
                                         data-ajax-dynamic-dd-data='{}' 
                                         data-ajax-dynamic-dd-placeholder-str='["- Sort -","- Child Sort 1 -","- Child Sort 2 -"]'
                                         data-ajax-dynamic-dd-control-ids='["dynamic-dd-sort","dynamic-dd-sort--child","dynamic-dd-sort--child-child"]'
                                         data-ajax-dynamic-dd-append-temp='
                                            <div class="uix-controls uix-controls__normal-select">
                                                <span class="uix-controls__arrow"><i class="fa fa-sort"></i></span>
                                                <select></select>
                                            </div>			                                
                                        '>
                                    </div>
                                    
                                    <!-- default value here -->
                                    <input type="hidden" name="myname1" id="dynamic-dd-sort" data-default-value="">
                                    <input type="hidden" name="myname2" id="dynamic-dd-sort--child" data-default-value="">
                                    <input type="hidden" name="myname3" id="dynamic-dd-sort--child-child" data-default-value="">


								
							</div>
							<!-- .col-12 end -->
						</div>
						<!-- .row end -->


				</div>
				<!-- .container end -->


			</section>

            
            
		   <!-- Content 
			====================================================== -->
			<section class="uix-spacing--s">
				<div class="container">
						<div class="row">
							<div class="col-12">
                                
                                    <h4>The default value is specified</h4>

                                    <div data-ajax-dynamic-dd-datatype="category"
                                         data-ajax-dynamic-dd-json="assets/json/catgories.json"
                                         data-ajax-dynamic-dd-method="POST"
                                         data-ajax-dynamic-dd-data='{}' 
                                         data-ajax-dynamic-dd-placeholder-str='["- Sort -","- Child Sort 1 -"]'
                                         data-ajax-dynamic-dd-control-ids='["dynamic-dd-sort2","dynamic-dd-sort2--child"]'
                                         data-ajax-dynamic-dd-append-temp='
                                            <div class="uix-controls uix-controls__normal-select">
                                                <span class="uix-controls__arrow"><i class="fa fa-sort"></i></span>
                                                <select></select>
                                            </div>			                                
                                        '>
                                    </div>
                                    
                                    <!-- default value here -->
                                    <input type="hidden" name="myname4" id="dynamic-dd-sort2" data-default-value="Level-1 | 2">
                                    <input type="hidden" name="myname5" id="dynamic-dd-sort2--child" data-default-value="Level-2 | 2_1">


								
							</div>
							<!-- .col-12 end -->
						</div>
						<!-- .row end -->


				</div>
				<!-- .container end -->


			</section>

            
            
            
		   <!-- Content 
			====================================================== -->
			<section class="uix-spacing--s">
				<div class="container">
						<div class="row">
							<div class="col-12">
                                
                                    <h4>Using custom theme for the select control</h4>

                                    <div data-ajax-dynamic-dd-datatype="category"
                                         data-ajax-dynamic-dd-json="assets/json/catgories.json"
                                         data-ajax-dynamic-dd-method="POST"
                                         data-ajax-dynamic-dd-data='{}' 
                                         data-ajax-dynamic-dd-placeholder-str='["- Sort -","- Child Sort 1 -","- Child Sort 2 -"]'
                                         data-ajax-dynamic-dd-control-ids='["dynamic-dd-sort3","dynamic-dd-sort3--child","dynamic-dd-sort3--child-child"]'
                                         data-ajax-dynamic-dd-append-temp='
                                            <div class="uix-controls uix-controls__select uix-controls__select--top">
                                                <label>
                                                    <select></select>
                                                </label>
                                            </div>			                                
                                        '>
                                    </div>
                                    
                                    <!-- default value here -->
                                    <input type="hidden" name="myname6" id="dynamic-dd-sort3" data-default-value="Level-1 | 2">
                                    <input type="hidden" name="myname7" id="dynamic-dd-sort3--child" data-default-value="">
                                    <input type="hidden" name="myname8" id="dynamic-dd-sort3--child-child" data-default-value="">


								
							</div>
							<!-- .col-12 end -->
						</div>
						<!-- .row end -->


				</div>
				<!-- .container end -->


			</section>
            

		   <!-- Content 
			====================================================== -->
			<section class="uix-spacing--s">
				<div class="container">
						<div class="row">
							<div class="col-12">
                                
                                    <h4>Show city list of China as per state select in dropdown select box</h4>

                                    <div data-ajax-dynamic-dd-datatype="place"
                                         data-ajax-dynamic-dd-json="assets/json/china.json"
                                         data-ajax-dynamic-dd-method="POST"
                                         data-ajax-dynamic-dd-data='{}' 
                                         data-ajax-dynamic-dd-placeholder-str='["- Province -","- City -","- District -"]'
                                         data-ajax-dynamic-dd-control-ids='["dynamic-dd-place","dynamic-dd-place--child","dynamic-dd-place--child-child"]'
                                         data-ajax-dynamic-dd-append-temp='
                                            <div class="uix-controls uix-controls__normal-select">
                                                <span class="uix-controls__arrow"><i class="fa fa-sort"></i></span>
                                                <select></select>
                                            </div>			                                
                                        '>
                                    </div>
                                    
                                    <!-- default value here -->
                                    <input type="hidden" name="myplace1" id="dynamic-dd-place" data-default-value="">
                                    <input type="hidden" name="myplace2" id="dynamic-dd-place--child" data-default-value="">
                                    <input type="hidden" name="myplace3" id="dynamic-dd-place--child-child" data-default-value="">


								
							</div>
							<!-- .col-12 end -->
						</div>
						<!-- .row end -->


				</div>
				<!-- .container end -->


			</section>
            
            
            
			
			
		</main>
		
     
			

        
        @@include('./src/components/_global/include-copyright.html')
        
        
    </div>
    <!-- .uix-wrapper end -->
       
		

	<script>
	( function( $ ) {
	"use strict";

		$( function() {
			/* 
			 ---------------------------
			 Callback Data
			 ---------------------------
			 */ 
			$( document ).on( 'change.DYNAMIC_DD_LIST', 'select', function( e ) {

				e.preventDefault();

				var $this        = $( this[ this.selectedIndex ] ),
					curVal       = $this.val(),
					curContents  = '';

				$( '#dynamic-callback').html( curVal );
				
				return false;

			});		


			
		} );

	} ) ( jQuery );


	</script>


	  
       

	  
       
    @@include('./src/components/_global/include-footer.html')

